<template>
    <div class="page">
        <van-nav-bar id="reset" title="基本信息" left-arrow @click-left="backHandle" fixed />
        <div class="pageCon fuPage">
            <div class="topBox">
                <div>基本信息</div>
                <span>用于完善您的资料</span>
                <div class="textLine"></div>
            </div>

            <div class="infoBox">
                <div class="infoBlock">
                    <div class="infoLine">
                        <div class="infoLeft">
                            您的头像
                        </div>
                        <div class="infoRight">
                            <van-uploader v-model="fileList" :before-delete="beforeDelete" :after-read="afterRead"
                                :max-count="1">
                                <img :src="user.userImg" alt="" class="userImgBox">
                            </van-uploader>
                        </div>

                    </div>
                    <div class="infoLine">
                        <div class="infoLeft">
                            <div>
                                <img src="../../assets/user/record/name.png">
                            </div>
                            姓名
                        </div>
                        <div class="infoRight">
                            <input type="text" placeholder="请输入姓名" v-model="user.userName" />
                        </div>
                    </div>
                    <div class="infoLine">
                        <div class="infoLeft">
                            <div>
                                <img src="../../assets/user/record/tel.png">
                            </div>
                            手机号码
                        </div>
                        <div class="infoRight">
                            <input type="number" placeholder="请输入您的手机号码" v-model="user.userTel" />
                        </div>
                    </div>

                    <div class="infoLine">
                        <div class="infoLeft">
                            <div>
                                <img src="../../assets/user/record/sex.png">
                            </div>
                            性别
                        </div>
                        <div class="infoRight">
                            <van-radio-group direction="horizontal" v-model="user.userSex">
                                <van-radio name="男" icon-size="16px">男</van-radio>
                                <van-radio name="女" icon-size="16px">女</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>

                <div class="btnBox">
                    <div @click="subHandle">保存</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { updateUser } from '../../network/user'
export default {
    name: 'HomeR',
    data() {
        return {

            user: JSON.parse(localStorage.user),
            fileList: []

        }
    },
    mounted() {


    },
    methods: {

        subHandle() {
            var user = this.user
            if (user.userName == '') {
                this.$toast.fail('请填写姓名')
                return
            }

            if (user.userTel == '') {
                this.$toast.fail('请填写手机号码')
                return
            }

            if (!this.validator(user.userTel)) {
                this.$toast.fail('请填写正确的手机号')
                return
            }

            console.log(user);

            console.log(this.fileList);


            let fd = new FormData();

            fd.append("userId", localStorage.userId);
            fd.append("userName", user.userName);
            fd.append("userTel", user.userTel);
            fd.append("userSex", user.userSex);

            if (this.fileList.length != 0) {
                fd.append('file', this.fileList[0].file)
            }

            updateUser(fd).then(res => {
                if (res.flag) {
                    this.$toast.success('保存成功')
                    if (this.fileList.length != 0) {
                        user.userImg = res.data.userImg
                    }

                    localStorage.user = JSON.stringify(user)
                }
            })

        },

        backHandle() {
            this.$router.back()
        },

        // 删除图片
        beforeDelete: function (e) {
            console.log(e);

            this.file = [];
            this.fileList = [];
        },
        // 图片上传
        afterRead: function (file) {
            // 此时可以自行将文件上传至服务器
            this.file = file.file
            console.log(this.file);
        },

        validator(val) {
            // 验证手机号 和座机号
            return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
        },






    },
    created() {


    },
    //计算属性
    computed: {

    },
    filters: {

    }

}








</script>

<style lang='less' scoped>
.topNavBox {
    z-index: 100 !important;
}

.pageCon {
    box-sizing: border-box;
    padding: 0px 30px;
    width: 100%;
    font-family: Source Han Sans CN;
}

.userImg {
    width: 100px;
    height: 100px;
}

.topBox {
    margin-top: 54px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.topBox>span {
    font-weight: 400;
    font-size: 20px;
    color: #CCCCCC;
}

.textLine {
    position: absolute;
    bottom: 4px;
    width: 112px;
    height: 10px;
    border-radius: 5px;
    background-color: #C3E9D2;
    z-index: -1;
}

.infoBox {
    margin-top: 34px;
    width: 690px;
    border-radius: 20px;
    border: 2px solid #F2F2F2;
}

.infoBlock {
    box-sizing: border-box;
    padding: 0 50px;
    width: 100%;
}

.infoBlock:not(:last-child) {
    border-bottom: 14px solid #fafafa;
}

.infoLine {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* height: 84px; */
}

.infoLine:not(:last-child) {
    border-bottom: 2px solid #fafafa;
}

.infoLeft {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28px;
    color: #666666;
}

.infoLeft>div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    width: 44px;
    height: 44px;
    background: #FAFAFA;
    border-radius: 50%;
    border: 2px solid #FAFAFA;
}

.infoLeft>div>img {
    width: 36px !important;
    height: 36px !important;
}

.infoRight {
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.infoRight>input {
    text-align: right;
    border: none;
    outline: none;
}

.allergyBox {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 18px 40px;
    width: 100%;
    background-color: #FAFAFA;
}

.allergyBox>div {
    margin: 0 24px 16px 0;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
    border: 2px solid #EEEEEE;

}

.activeTag {
    background-color: aquamarine !important;
    color: #fff !important;
}

.inpBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
}

.inpBox>input {
    width: auto;
    text-align: center;
}

.btnBox {
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btnBox>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 364px;
    height: 72px;
    background: linear-gradient(146deg, #14A870, #20BB66);
    box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.08);
    border-radius: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #FFFFFF;
}

#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}


.userImgBox {
    width: 100px;
    height: 100px;
    border-radius: 16px;
}

::v-deep .van-uploader__upload,
::v-deep .van-image,
::v-deep .van-uploader__preview-image {
    width: 100px;
    height: 100px;
}
</style>